<template>
    <div class="header-container">
      <div class="left-section">
        <img src="@/assets/logo.png" alt="Vue Logo" class="logo-img" />
      </div>
      <div class="right-section">
        <div class="time-section">
          {{ currentTime }}
          <el-icon class="icon"><Clock /></el-icon>
        </div>
        <el-icon @click="goToNotifications" class="icon"><Bell /></el-icon>
        <el-dropdown @command="handleCommand">
          <span>
            <el-avatar :size="avatarSize" :src="avatarSrc"></el-avatar>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="profile">账号管理</el-dropdown-item>
              <el-dropdown-item command="loginout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </template>
  
  <script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import 'element-plus/es/components/message/style/css'
import { ElIcon, ElAvatar, ElDropdown, ElDropdownMenu, ElDropdownItem } from 'element-plus'
import axios from 'axios'

const router = useRouter()
const avatarSrc = require('@/assets/headpic.jpg')
const avatarSize = ref(40)

const currentTime = ref('')
const updateCurrentTime = () => {
  const now = new Date()
  currentTime.value = now.toLocaleTimeString()
}

onMounted(() => {
  updateCurrentTime()
  setInterval(updateCurrentTime, 1000)
})

const goToNotifications = () => {
  router.push({ name: 'notifications' })
}

const handleCommand = async (command) => {
  if (command === 'profile') {
    router.push({ name: 'user' })
  } else if (command === 'loginout') {
    await axios.post("http://localhost:8080/Login/logout");
    ElMessage('退出登录')
    router.push({ name: 'login' })
  }
}

const enlargeAvatar = () => {
  avatarSize.value = 50
}

const shrinkAvatar = () => {
  avatarSize.value = 40
}
</script>

<style scoped>
.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  background-color: #000;
  height: 60px;
  color: #fff;
}

.left-section {
  display: flex;
  align-items: center;
}

.right-section {
  display: flex;
  align-items: center;
  position: relative;
}

.icon {
  margin-right: 30px;
  cursor: pointer;
}

.time-section {
  margin-right: 20px;
  width: 120px;
}

.el-avatar {
  cursor: pointer;
}


.logo-img {
  width: 40px;
  height: 40px;
}
</style>
